<template>
  <div class="example">
    <transition-group name="cell" tag="div" class="container">
      <div v-for="cell in cells" :key="cell.id" class="cell">
        {{ cell.number }}
      </div>
    </transition-group>
    <div class="btn">
      <button v-on:click="shuffle">Shuffle</button>
    </div>
  </div>
</template>

<script>
/**
 * 例子 - 列表过渡 - 多维网格
 */

/**
 * 动态加载JavaScript
 */
function loadJS(url) {
  const script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = url;
  document.getElementsByTagName('head')[0].appendChild(script);
}

export default {
  data() {
    return {
      cells: Array.apply(null, { length: 81 }).map(function(_, index) {
        return {
          id: index,
          number: (index % 9) + 1
        };
      })
    }
  },
  created() {
    loadJS('https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js');
  },
  methods: {
    shuffle: function() {
      this.cells = _.shuffle(this.cells);
    }
  }
}
</script>

<style lang="less" scoped>
.example {
  width: 238px;
}

.container {
  display: flex;
  flex-wrap: wrap;
  width: 238px;
  margin-top: 10px;
}

.cell {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 25px;
  height: 25px;
  border: 1px solid #aaa;
  margin-right: -1px;
  margin-bottom: -1px;
}
.cell:nth-child(3n) {
  margin-right: 0;
}
.cell:nth-child(27n) {
  margin-bottom: 0;
}
.cell-move {
  transition: transform 1s;
}
</style>
